<template>
  <div id="guide" v-show="isShow" transition="fade">
    <div class="modal">
      <div class="close" @click="hideClick()"></div>
      <div class="modal-body">
        <div class="modal_con">
          <div class="title">活动规则</div>
          <div class="date">活动时间: <span>2018.8.10--2018.8.17</span></div>
          <div class="rule">
            <div class="name">参与方式:</div>
            <div class="desc">1.点击“立刻告白”，开始录制对他/她的爱，录音完成后，点击“上传”则录音成功；</div>
            <div class="desc">2.语音生成后，可召唤好友为他/她送上爱心祝福，祝福越多，排行榜名次越高，排名第一将获得活动奖励。</div>
          </div>
          <div class="rule">
            <div class="name">活动奖励:</div>
            <div class="desc">1.每日排行榜第一名，将由秒台车<span>免费代送给心仪人一束鲜花；</span></div>
            <div class="desc">2.活动结束后，排行总榜第一名将送上<span>一年汽车免费使用权</span></div>
          </div>
          <div class="rule">
            <div class="name">注意事项:</div>
            <div class="desc">1.每个用户不重复中奖；</div>
            <div class="desc">2.获得一年汽车免费使用权的用户，须已具备有效的身份证、驾驶证、银行卡；</div>
            <div class="desc">3.本活动最终解释权归秒台车所有。</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'guide',
  props: ['isClick'],
  data () {
    return {
       isShow: false,
    }
  },
  activated(){
    var self = this;
    this.$HUB.$on('showGuide',function(){
      self.isShow = true;
    })
    this.$HUB.$on('hideGuide',function(){
      self.isShow = false;
    })
  },
  methods: {
    hideClick: function(){
      console.log('hideClick');
      this.isShow = false;
    },
    hide: function(e){
      e.returnValue = false;
    }
  },
}
</script>
<style scoped lang="less">
#guide{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
}
.modal{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.5);
  .modal-body{
    width: 750px;
    height: 1037px;
    border-radius: 13px;
    margin: auto;
    background-image: url(../../assets/images/qi_guide_02.png);
    background-position: center center;
    background-size: 750px 1037px;
    background-repeat: no-repeat;
    .modal_con{
      width: 605px;
      padding: 10px 20px;
      height: 980px;
      overflow-y: scroll;
      margin: auto;
      .title{
        font-family: SourceHanSansCN-Medium;
        font-size: 40px;
        font-weight: 500;
        color: #5c2424;
        text-align: center;
        margin-bottom: 16px;
      }
      .date{
        font-size: 30px;
        font-weight: bold;
        color: #5c2424;
      }
      .rule{
        .name{
          font-size: 30px;
          font-weight: bold;
          color: #5c2424;
          margin: 10px 0;
        }
        .desc{
          font-family: SourceHanSansCN-Regular;
          font-size: 28px;
          font-weight: normal;
          letter-spacing: 0px;
          color: #5c2424;
          line-height: 40px;
        }
      }
    }
  }
  .close {
    width: 68px;
    height: 78px;
    margin-top: 50px;
    margin-left: 600px;
    background-image: url(../../assets/images/icon_close2.png);
    background-position: center center;
    background-size: 68px 78px;
    background-repeat: no-repeat;
  }
}

</style>
